<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Upload</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
    <div style="height: 10%; padding-left: 10px; margin-top: 15px; margin-left: 15px">
        <input type="file" id="file_input">
        <input type="text" id="kg_name_input" placeholder="KG Name">
        <button id="upload_button">Upload</button>
    </div>
    <div style="height: 10%; padding-left: 10px; margin-top: 15px; margin-left: 15px">
        <select id="kg_name_selector" style="width: 150px;">
        </select>
        <!-- <button id="setting_button" data-toggle="modal" data-target="#settings-modal">Setting</button> -->
        <!-- <button id="alias_button" data-toggle="modal" data-target="#alias_modal">Aliases</button> -->
        <button id="delete_button" data-toggle="modal" data-target="#confirm-delete-modal">Delete</button>
    </div>

    <!-- 确认删除模态框 -->
    <div class="modal fade" id="confirm-delete-modal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Delete KG</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete the selected KG?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirm-delete-button">Confirm Delete</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 设置模态框 -->
    <div class="modal fade" id="settings-modal" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="settingsModalLabel">Settings</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-striped" id="type-color-table">
                        <thead>
                            <tr>
                                <th scope="col">Entity Type</th>
                                <th scope="col">Color</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="save-settings-button">Save</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="alias_modal" tabindex="-1" role="dialog" aria-labelledby="aliasModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="aliasModalLabel">Aliases</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th scope="col" style="display:none;">ID</th>
                                <th scope="col">元素</th>
                                <th scope="col">名称</th>
                                <th scope="col">别名</th>
                            </tr>
                        </thead>
                        <tbody id="alias_table_body">
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="save_alias_button">Save</button>
                </div>
            </div>
        </div>
    </div>


    <script>
        // 请求所有知识图谱名称并填充下拉菜单
        function load_kg_names() {
            $.get('http://localhost:5500/get_all_kg_names', function (data) {
                var kg_name_selector = $('#kg_name_selector');
                kg_name_selector.empty();
                data.forEach(function (kg_name) {
                    kg_name_selector.append($('<option>').text(kg_name));
                });
            });
        }

        // 加载实体类型和颜色映射
        function load_type_color_mappings(kg_name) {
            $.get('http://localhost:5500/get_type_color_mappings?kg_name=' + encodeURIComponent(kg_name), function (data) {
                var type_color_table = $('#type-color-table tbody');
                type_color_table.empty();
                data.forEach(function (item) {
                    var row = $('<tr>');
                    row.append($('<td>').text(item.entity_type));
                    row.append($('<td>').append($('<input>').attr('type', 'color').val(item.color)));
                    type_color_table.append(row);
                });
            });
        }

        // 加载实体和关系类型
        function load_aliases(kg_name) {
            $.get('http://localhost:5500/get_aliases?kg_name=' + encodeURIComponent(kg_name), function (data) {
                var alias_table_body = $('#alias_table_body');
                alias_table_body.empty();
                data.forEach(function (item) {
                    var row = $('<tr>');
                    row.append($('<td>').text(item.id).css('display', 'none')); // 添加ID并隐藏
                    row.append($('<td>').text(item.category));
                    row.append($('<td>').text(item.name));
                    row.append($('<td>').append($('<input>').attr('type', 'text').val(item.aliases.join(', '))));
                    alias_table_body.append(row);
                });
            });
        }

        $(document).ready(function () {
            // 加载知识图谱名称
            load_kg_names();

            $('#upload_button').on('click', function () {
                var file_input = document.getElementById('file_input');
                var file = file_input.files[0];
                var kg_name = $('#kg_name_input').val();
                var formData = new FormData();
                formData.append('file', file);
                formData.append('kg_name', kg_name);
                // ajax指定端口5500
                

                $.ajax({
                    url: 'http://localhost:5500/upload',
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        alert(response.message);
                        load_kg_names();
                        $('#kg_name_input').val('');
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert('Error: ' + textStatus);
                    }
                });
            });

            $("#confirm-delete-button").click(function () {
                var kg_name = $("#kg_name_selector").val();
                if (kg_name) {
                    $.ajax({
                            url: 'http://localhost:5500/delete_kg?kg_name=' + encodeURIComponent(kg_name),
                            type: 'DELETE',
                            success: function (data) {
                                alert(data.message);
                                load_kg_names();
                                $("#confirm-delete-modal").trigger('click');
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                alert('Error: ' + textStatus);
                            }
                    });
                }
            });

            $("#setting_button").click(function () {
                var kg_name = $("#kg_name_selector").val();
                load_type_color_mappings(kg_name);
                $("#settings-modal").modal('show');
            });

            // Save按钮事件处理
            $("#save-settings-button").click(function () {
                var kg_name = $("#kg_name_selector").val();
                var type_color_table = $("#type-color-table tbody");
                var type_color_mappings = [];

                // 遍历表格行以获取实体类型和颜色值
                type_color_table.find("tr").each(function () {
                    var entity_type = $(this).find("td:first").text();
                    var color = $(this).find("input[type='color']").val();
                    type_color_mappings.push({ entity_type: entity_type, color: color });
                });

                // 发送PUT请求更新实体类型和颜色映射
                $.ajax({
                    url: "http://localhost:5500/update_type_color_mappings?kg_name=" + encodeURIComponent(kg_name),
                    type: "PUT",
                    data: JSON.stringify(type_color_mappings),
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        alert(data.message);
                        $("#settings-modal").trigger('click');
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert("Error: " + textStatus);
                    }
                });

                $("#settings-modal").modal("hide");
            });

        // 别名按钮事件处理
        $("#alias_button").click(function () {
            var kg_name = $("#kg_name_selector").val();
            load_aliases(kg_name);
            $("#alias_modal").modal('show');
        });

        $("#save_alias_button").click(function () {
            var kg_name = $("#kg_name_selector").val();
            var alias_table_body = $("#alias_table_body");
            var aliases = [];

            // 遍历表格行以获取实体或关系类型及别名和ID
            alias_table_body.find("tr").each(function () {
                var id = $(this).find("td:nth-child(1)").text();
                var category = $(this).find("td:nth-child(2)").text();
                var name = $(this).find("td:nth-child(3)").text();
                var aliases_input = $(this).find("input[type='text']").val();
                var aliases_list = aliases_input.split(/[,，]/)
                    .map(function (alias) {
                        return alias.trim();
                    })
                    .filter(function (alias) {
                        return alias !== "";
                    });
                aliases.push({ id: id, category: category, name: name, aliases: aliases_list });
            });

            // 发送PUT请求更新实体和关系类型的别名
            $.ajax({
                url: "http://localhost:5500/update_aliases?kg_name=" + encodeURIComponent(kg_name),
                type: "PUT",
                data: JSON.stringify(aliases),
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    alert(data.message);
                    $("#alias_modal").trigger('click');
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert("Error: " + textStatus);
                }
            });

            $("#alias_modal").modal("hide");
        });
    });
</script>
</body>
</html>
